<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
      <link rel="icon" type="image/svg+xml" href="./src/assets/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NaivePlus</title>
      <link href="./src/assets/main.css" rel="stylesheet" type="text/css">
      <style>
          body {
              background: var(--background-color);
              font-size: 14px;
          }
          .first-loading-wrap {
              display: flex;
              width: 100%;
              height: 100vh;
              justify-content: center;
              align-items: center;
              flex-direction: column;
          }

          .first-loading-wrap > h1 {
              font-size: 128px
          }

          .first-loading-wrap .loading-wrap {
              padding: 98px;
              display: flex;
              justify-content: center;
              align-items: center
          }

          .dot {
              animation: antRotate 1.2s infinite linear;
              transform: rotate(45deg);
              position: relative;
              display: inline-block;
              font-size: 32px;
              width: 32px;
              height: 32px;
              box-sizing: border-box
          }

          .dot i {
              width: 14px;
              height: 14px;
              position: absolute;
              display: block;
              background-color: var(--primary-colors);
              border-radius: 100%;
              transform: scale(.75);
              transform-origin: 50% 50%;
              opacity: .3;
              animation: antSpinMove 1s infinite linear alternate
          }

          .dot i:nth-child(1) {
              top: 0;
              left: 0
          }

          .dot i:nth-child(2) {
              top: 0;
              right: 0;
              -webkit-animation-delay: .4s;
              animation-delay: .4s
          }

          .dot i:nth-child(3) {
              right: 0;
              bottom: 0;
              -webkit-animation-delay: .8s;
              animation-delay: .8s
          }

          .dot i:nth-child(4) {
              bottom: 0;
              left: 0;
              -webkit-animation-delay: 1.2s;
              animation-delay: 1.2s
          }

          @keyframes antRotate {
              to {
                  -webkit-transform: rotate(405deg);
                  transform: rotate(405deg)
              }
          }

          @-webkit-keyframes antRotate {
              to {
                  -webkit-transform: rotate(405deg);
                  transform: rotate(405deg)
              }
          }

          @keyframes antSpinMove {
              to {
                  opacity: 1
              }
          }

          @-webkit-keyframes antSpinMove {
              to {
                  opacity: 1
              }
          }
          .dark-body{
              background-color: var(--dark-background-colors);
          }
      </style>
  </head>
  <body>
    <div id="app">
        <div class="first-loading-wrap">
            <div class="loading-wrap">
                <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
            </div>
        </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
    <script type="text/javascript">
        let theme=localStorage.getItem("SpringBoot_theme");
        if (theme!=null){
            if (theme.indexOf("dark")>=0){
                document.getElementsByTagName('body')[0].className="dark-body";
            }
        }
    </script>
  </body>
</html>
